<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
    <style>
        body {
            background-color: #000;
            color: #fff;
            margin: 0;
            padding: 20px;
        }
        h1 {
            color: #fff;
            text-align: center;
        }
        hr {
            border: 1px solid #333;
            margin: 20px 0;
        }
        a {
            text-decoration: none;
            color: #fff;
        }
        a:hover, a:active, a:focus, a:focus-visible, a:focus-within {
            color: #007bff;
        }
        #general-data {
            display: flex;
            justify-content: space-around;
            background-color: #1a1a1a;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        .data-item {
            text-align: center;
        }
        .data-icon {
            font-size: 28px;
            color: #007bff;
            margin-bottom: 5px;
        }
        .data-value {
            font-size: 24px;
            font-weight: bold;
            color: #fff;
        }
        .data-label {
            font-size: 14px;
            color: #999;
            margin-top: 5px;
        }
        .chart-container {
            display: flex;
            justify-content: space-between;
            margin: 20px;
        }
        .chart {
            width: 48%;
            height: 400px;
            background-color: #1a1a1a;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <div id="general-data">
        <div class="data-item">
            <div class="data-icon"><i class="fas fa-chart-line"></i></div>
            <div class="data-value" id="gmv-value">--</div>
            <div class="data-label">GMV (万元)</div>
        </div>
        <div class="data-item">
            <div class="data-icon"><i class="fas fa-shopping-cart"></i></div>
            <div class="data-value" id="sales-value">--</div>
            <div class="data-label">销售额 (万元)</div>
        </div>
        <div class="data-item">
            <div class="data-icon"><i class="fas fa-money-bill-wave"></i></div>
            <div class="data-value" id="real-sales-value">--</div>
            <div class="data-label">实际销售额 (万元)</div>
        </div>
        <div class="data-item">
            <div class="data-icon"><i class="fas fa-user-tag"></i></div>
            <div class="data-value" id="arppu-value">--</div>
            <div class="data-label">ARPPU</div>
        </div>
    </div>

    <div class="chart-container">
        <div id="gmv-trend" class="chart"></div>
        <div id="channel-distribution" class="chart"></div>
    </div>

<script>
        // 获取并显示general_data
        fetch('/api/general_data')
    .then(response => response.json())
        .then(data => {
            document.getElementById('gmv-value').textContent = data.gmv;
            document.getElementById('sales-value').textContent = data.sales;
            document.getElementById('real-sales-value').textContent = data.real_sales;
            document.getElementById('arppu-value').textContent = data.arppu;
        })
        .catch(error => console.error('获取通用数据失败:', error));

        // GMV趋势图
        const gmvChart = echarts.init(document.getElementById('gmv-trend'));
        fetch('/api/gmv_trend')
        .then(response => response.json())
        .then(data => {
            const option = {
        title: {
                    text: 'GMV趋势',
            left: 'center',
            textStyle: {
                fontSize: 18,
                fontWeight: 'bold',
                        color: '#fff'
            }
        },
        tooltip: {
            trigger: 'axis',
                    formatter: '{b}<br/>{a}: {c}万元',
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    borderColor: '#333',
                    borderWidth: 1,
            textStyle: {
                        color: '#fff'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
                    type: 'category',
                    data: data.dates,
            axisLine: {
                lineStyle: {
                            color: '#666'
                }
            },
            axisLabel: {
                        color: '#999',
                        rotate: 45
                    },
                    axisTick: {
                        alignWithLabel: true,
                        lineStyle: {
                            color: '#666'
                        }
            }
        },
        yAxis: {
                    type: 'value',
                    name: '万元',
                    nameTextStyle: {
                        color: '#999',
                        padding: [0, 0, 0, 40]
                    },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                            color: '#333'
            }
        },
                    axisLabel: {
                        color: '#999',
                        formatter: '{value}'
                    }
                },
        series: [{
                    name: 'GMV',
                    type: 'line',
                    smooth: true,
                    data: data.values,
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: {
                        color: '#007bff',
                        borderWidth: 2
                    },
                    lineStyle: {
                        width: 3,
                        shadowColor: 'rgba(0, 123, 255, 0.5)',
                        shadowBlur: 10,
                        shadowOffsetY: 8
                    },
                    areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(0, 123, 255, 0.3)' },
                            { offset: 1, color: 'rgba(0, 123, 255, 0.1)' }
                        ])
            }
        }]
            };
            gmvChart.setOption(option);
        });

        // 渠道获客占比图
        const channelChart = echarts.init(document.getElementById('channel-distribution'));
        fetch('/api/channel_distribution')
        .then(response => response.json())
        .then(data => {
            const option = {
        title: {
                    text: '渠道获客占比',
            left: 'center',
            textStyle: {
                fontSize: 18,
                fontWeight: 'bold',
                        color: '#fff'
            }
        },
        tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} ({d}%)',
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    borderColor: '#333',
                    borderWidth: 1,
                    textStyle: {
                        color: '#fff'
                }
            },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    top: 'middle',
                    textStyle: {
                    color: '#999'
                }
            },
                series: [
                    {
                        name: '获客渠道',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#1a1a1a',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                show: true,
                                fontSize: '20',
                                fontWeight: 'bold',
                                color: '#fff'
                            },
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: data.channels.map((channel, index) => ({
                            value: data.values[index],
                            name: channel,
            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: `rgba(${Math.floor(Math.random() * 100 + 155)}, ${Math.floor(Math.random() * 100 + 155)}, ${Math.floor(Math.random() * 100 + 155)}, 0.8)` },
                                    { offset: 1, color: `rgba(${Math.floor(Math.random() * 100 + 155)}, ${Math.floor(Math.random() * 100 + 155)}, ${Math.floor(Math.random() * 100 + 155)}, 0.3)` }
                                ])
                }
                        }))
                    }
                ]
            };
            channelChart.setOption(option);
        });

        // 响应式调整
        window.addEventListener('resize', function() {
            gmvChart.resize();
            channelChart.resize();
        });
</script>
</body>
</html>